<template>
	<view>
		<match-media :max-width="768">
			<navBar></navBar>
		</match-media>
		<view class="uni-padding-wrap">
			<!-- <page-head title="cover-view用于覆盖map、video等原生组件"></page-head> -->
			<view class="content">
				<view class="tab-head">
					<view class="tab_tit">
						<view :class="['title',index==tabCurrentIndex?'active':'']" v-for="item,index in tabTitle"
							:key="index" @tap="changeTab(index)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="information" v-if="tabCurrentIndex==0">
					<view class="information_item" v-for="item,index in 7" :key="'info' + index">
						<view class="img_box">
							<image src="/static/image/informimage.jpg" mode="widthFix" class="info_img"></image>
							<view class="shadow"></view>
						</view>
						<view class="container">
							<view class="text"> {{$t('Page.component.wxyqjj')}}</view>
							<view class="info_botm">
								<view class="more_information">
									<view>{{$t('Page.component.gdxx')}}</view>
									<uni-icons type="arrow-top" size="25" color=" #adadc2;"
										class="icon-hover"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="award" v-else>
					<view class="award-tabHeard">
						<view class="header_title" v-for="(item,index) in tabHeader" :key="index">
							<view class="">
								{{item}}
							</view>
							<block v-if="index!=2">
								<view :class="[isSort&&sortIndex==index?'icon_down':'','icon_box']">
									<uni-icons type="arrow-up" size="20" color=" #33c38f;" :class="['icon']"
										@click="changeIcon(index)"></uni-icons>
								</view>
							</block>
						</view>
					</view>
					<view class="tab_content header_title">
						<block v-for="(item,index) in tabHeader" :key="index">
							<view :class="[isSort&&sortIndex==index?'icon_down':'','icon_box']">
								{{item}}
							</view>
						</block>
					</view>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
							:current="pageCurrent" :total="total" @change="change" /></view>
				</view>
				<Footer></Footer>
			</view>
		</view>
		<match-media :max-width="768" class="tabbar">
			<tabBar :showselected="true"></tabBar>
		</match-media>
	</view>
</template>

<script>
	// import tableData from '@/pages/extUI/table/tableData.js'
	import Footer from '@/components/footer/footer.vue'
	export default {
		components: {
			Footer
		},
		data() {
			return {
				sortIndex: 0,
				isSort: false,
				tabHeader: [this.$t('Page.component.mc'), this.$t('Page.component.sl'), this.$t('Page.component.sj'), this
					.$t('Page.component.zt')
				],
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				tabCurrentIndex: 0,
				tabTitle: [this.$t('Page.component.hdqd'), this.$t('Page.component.hj')],
			};
		},
		onLoad() {

		},
		onShow() {
			this.getData(1)
		},
		methods: {
			changeIcon(index) {
				this.sortIndex = index
				this.isSort = !this.isSort
				console.log(this.isSort, index);
			},
			// 分页触发
			change(e) {
				// this.$refs.table.clearSelection()
				this.getData(e.current)
			}, // 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			changeTab(index) {
				this.tabCurrentIndex = index
			}
		}
	}
</script>

<style lang="less">
	.navBox {
		color: #fff;
		z-index: 1;
		position: fixed;
		width: 100vw;
	}

	.placeholder {
		height: 60px;
	}

	.content {
		max-width: 1200px;
		margin: auto;
		padding-bottom: 50px;
		background-color: #20262d;
	}

	.tab-head {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.tab_tit {
		margin: 8px 8px;
		padding: 4px 4px;
		display: inline-flex;
		align-items: center;
		background-color: #20262d;
		border-radius: 30rpx;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
	}

	.title {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
	}

	.active {
		background-color: #2b333b;
	}

	.information {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 24px;
		display: grid;
		padding: 32px;

	}

	@media screen and (max-width: 768px) {
		.information {
			padding: 0rpx;
		}
	}

	.information_item {
		border-radius: 16px;
		overflow: hidden;
	}

	.img_box {
		position: relative;
	}

	.info_img {
		width: 100%;
	}

	.shadow {
		position: absolute;
		width: 100%;
		bottom: 0;
		background: linear-gradient(rgba(36, 42, 50, 0), #242a32);
		height: 40px;
	}

	.container {
		padding: 4px 16px 16px;
		background-color: #242a32;
	}

	.text {
		font-size: 24rpx;
		line-height: 30rpx;
		color: #fff;
	}

	.info_botm {
		display: flex;
		justify-content: center;
	}

	.more_information {
		font-size: 28rpx;
		display: inline-flex;
		background: #2b333b;
		margin: 8px auto 0px;
		color: #33c38f;
		padding: 5px 10px;
		border-radius: 15rpx;
	}

	.icon-hover {
		margin-left: 20rpx;
	}

	.award {
		color: #adadc2;

		.award-tabHeard {
			margin-top: 20rpx;
			display: flex;
			line-height: 100rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

			// border-color: rgba(0,0,0,0.12);
			.header_title {
				flex: 1;
				position: relative;
				cursor: pointer;
				display: flex;

				.icon {
					vertical-align: middle;
					opacity: 0;
					margin: 0rpx 10rpx;
				}

			}

			.tab_content {
				margin-top: 24px;
			}

			.header_title:hover .icon {
				transition: all .5s;
				opacity: 1;
			}
		}
	}

	.header_title {
		flex: 1;
		position: relative;
		cursor: pointer;
		display: flex;

		.icon {
			vertical-align: middle;
			opacity: 0;
			margin: 0rpx 10rpx;
		}

	}

	.icon_box {
		transition: all .5s;
	}

	.icon_down {
		transform: rotateZ(180deg);
	}

	.uni-pagination__btn {
		background: #33c38f !important;
	}
</style>